import React, { useState, useEffect, useRef } from "react";
import { UserCircleO, AddO, Edit } from "@react-vant/icons";
import { Cell, Dialog } from "react-vant";
import axios from "../axios/index";
import { useNavigate } from "react-router-dom";
type Props = {};

const Passenger = (props: Props) => {
  const [token, setToken]: any = useState([]);
  const [list, setList] = useState([]);
  const navigate = useNavigate();
  useEffect(() => {
    (async () => {
      let res = await axios.get("http://localhost:8080/addcklblist");
      console.log(res.data);
      setList(res.data);
    })();
  }, []);
  useEffect(() => {
    let token = localStorage.getItem("username");
    setToken(token);
  }, []);
  const addck = () => {
    let token = localStorage.getItem("token");
    if (!token) {
      Dialog.confirm({
        title: "标题",
        message: "未登录,请先登录",
      })
        .then(() => {
          console.log("confirm");
          navigate("/login2");
        })
        .catch(() => {
          console.log("catch");
        });
    } else {
      navigate("/np");
    }
  };
  const bianji = (item: any) => {
    console.log(item);

    navigate("/bianji", { state: item });
  };

  const [ischeckedl, setIschecked] = useState(false);
  const quan = (e: any, id: any) => {
    console.log(list);
    list.forEach((item: any, index: any) => {
      if (item.id === id) {
        item.status = e.target.checked;
      }
    });
    console.log(list);
  };
  const que = () => {
    let arr: any = [];
    list.forEach((item: any, index: any) => {
      if (item.status === true) {
        arr.push(item);
        localStorage.setItem("abc", JSON.stringify(arr));
        navigate('/ofg')
      }
    });
  };
  return (
    <div className="passengers">
      <header>
        <div className="passengers_top">
          <div className="passengers_top_title">乘客列表</div>
          <div className="passengers_top_bottom">
            <span>
              <UserCircleO style={{ width: "40px", height: "40px" }} />
            </span>
            <span>{token}</span>
            <span>切换账号》</span>
          </div>
        </div>
      </header>
      <main>
        <div className="passengers_box">
          <div className="passengers_box_add">
            <span>
              <AddO style={{ width: "25px", height: "25px" }} />
            </span>
            <span onClick={addck}>新增乘客</span>
          </div>
          <div className="passengers_box_list">
            <div className="passengers_box_list_nr">
              <div className="passengers_box_list_nr_title">
                下列可刷新乘客列表
              </div>
              <div className="passengers_box_list_nr_box">
                {list.length > 0
                  ? list &&
                    list.map((item: any, index: any) => {
                      return (
                        <div className="nr" key={index}>
                          <div onClick={() => bianji(item)}>
                            <Edit style={{ width: "25px", height: "25px" }} />
                          </div>
                          <div>
                            <p>
                              {item.name} <span>{item.type}</span>
                            </p>
                            <p>
                              <span>身份证{item.code}</span>
                              <span>手机号:{item.tel}</span>
                              <span>证件类型:{item.zjlx}</span>
                            </p>
                          </div>
                          <div>
                            <input
                              type="checkbox"
                              onClick={(e) => quan(e, item.id)}
                            />
                          </div>
                        </div>
                      );
                    })
                  : "暂无数据"}
              </div>
            </div>
          </div>
        </div>
        <div className="passengers_wz">本次购票由xxx服务提供</div>
      </main>
      <footer>
        {" "}
        <div className="passengers_qd">
          <button onClick={que}>确定</button>
        </div>
      </footer>
    </div>
  );
};

export default Passenger;
